<template>
    <el-card shadow="hover">
        <div ref="charone" style="width: 95%;height: 290px;"></div>
    </el-card>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
const { proxy } = getCurrentInstance()

onMounted(() => {
    getCharData()
})

let data = reactive({
    charData: []
})

let getCharData = async () => {
    let res = await proxy.$api.getCharData()
    console.log('getCharData', res);
    data.charData = res
    initOne()
}

let charone = ref(null)
let initOne = () => {
    const charDom = charone.value
    const myChart = echarts.init(charDom)
    const option = {
        title: {
            text: '手机数据表'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: Object.keys(data.charData.orderData.data[0])
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.charData.orderData.date
        },
        yAxis: {
            type: 'value'
        },
        series: []
    };
    option.series = Object.keys(data.charData.orderData.data[0]).map(val => {
        return {
            name: val,
            data: data.charData.orderData.data.map(item => item[val]),
            stack: 'Total',
            type: 'line'
        }
    })
    myChart.setOption(option);
}


</script>

<style lang='less' scoped></style>